{% extends "../base.html" %}

{% block head %}
  <link rel="stylesheet" type="text/css" href="{{ static_url('css/secret.css') }}">
{% end %}

{% block body %}
  <div class='container'>
    <form action="{{ request.path }}" method="POST" class="form-signin">
      <h2 class="form-signin-heading">注册</h2>
      <label for="inputEmail" class="sr-only">邮箱</label>
      <input id="email" name="email" type="email" class="form-control" placeholder="example@email.com" required autofocus/>
      <label for="inputName" class="sr-only">昵称</label>
      <input id="name" name="name" type="text" class="form-control" placeholder="昵称" required/>
      <label for="inputPassword" class="sr-only">密码</label>
      <input id="password" name="password" type="password" class="form-control" placeholder="密码" required/>
      <label for="inputPasswordConfirm" class="sr-only">确认</label>
      <input id="password-confirm" type="password" class="form-control" placeholder="确认" required/>
      <div class="checkbox">
        <label>
          <input type="checkbox" value="remember-me" checked="true"/>记住我
        </label>
      </div>
      {% module xsrf_form_html() %}
      <span id="notify">
        {% if error %}
          <div class="alert alert-danger">
            <button class="close" data-dismiss="alert">&times;</button>
            {{ error }}
          </div>
        {% end %}
      </span>
      <button id="submit" class="btn btn-lg btn-primary btn-block" type="submit">注册</button>
    </form>
  </div>
{% end %}

{% block bottom%}
  <script type="text/javascript">
    $("button").click(function () {
      if (!passwordConfirmation("#password", "#password-confirm")) {
        $("#notify").html('<div class="alert alert-danger">'
                          + '<button class="close" data-dismiss="alert">&times;</button>'
                          + '两次输入密码不一致！'
                          + '</div>');
      } else {
        $("form").submit();
      }
    });
  </script>
{% end %}
